<template>
    <div class="login-container">
        <h2>登录</h2>
        <form @submit.prevent="handleSubmit">
            <div class="form-group">
                <label for="username">用户名：</label>
            </div>
            <div class="form-group">    
                <input type="text" id="username" v-model="username" required>
                <label>密码：</label>
                <input type="password" id="password" v-model="password" required >
            </div>
            <button type="submit">登录</button>
        </form>
        

    </div>
</template>

<script>
import axios from 'axios';

    export default{
        data(){
            return{
                username:'',
                password:''
            }
        },methods: {
            async handleSubmit(){
                //处理登录逻辑

                //发送post请求到后端Api
                const response=await axios.post("http://localhost:8888/users/login",
                                                {
                                                    name: this.username,
                                                    pwd: this.password
                                                });
                if(response.data.code==200)
                {
                    this.$router.push('/chat')
                }
                else{
                    alert("用户名或者密码错误");
                }

                
            //     if(this.username &&this.password){
            //         alert(`用户名${this.username},密码:${this.password}`);

            //     }else{
            //         alert("用户名和密码为空")
            //     }
            }
        },
    }
</script>

<style scoped>

    .login-container {
        max-width: 300px;
        margin: 0 auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f9f9f9;
    }

    .form-group {
        margin-bottom: 15px;
    }

    label {
        display: block;
        margin-bottom: 5px;
    }

    input {
        width: 100%;
        padding: 8px;
        box-sizing: border-box;
    }

    button {
        width: 100%;
        padding: 10px;
        background-color: #28a745;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    button:hover {
      background-color: #218838;
    }

</style>